<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.u-name,
			.u-right,
			.u-down,
			.u-file{
				vertical-align: middle;
			}
			.u-right,
			.u-down{
				display: inline-block;
			}
			.u-right{
				/*border: 1px solid red;*/
				width: 9px;
				height: 14px;
				background-image: url(img/icon-right.png);
			}
			.u-down{
				width: 14px;
				height: 9px;
				background-image: url(img/icon-down.png);
			}
			.u-file{
				/*border: 1px solid red;*/
				display: inline-block;
				width: 17px;
				height: 23px;
				background-image: url(img/icon-file.png);
			}
			.none{
				display: none;
			}
			nav{
				position: relative;
				width: 200px;
				border: 1px solid black;
				background-color: gainsboro;
			}
			.J_CateMore{
				display: block;
			}
			.J_CateMore:hover{
				background-color: #ADF;
			}
		</style>
		<script type="text/javascript" src="js/lib/jquery.min.js" ></script>
	</head>
	
	<body>
		<a id="J_Lv1" class="J_Cate J_Province" data-catelv="1"><span class="u-name">省份</span><i class="u-right"></i></a>
		<a id="J_Lv2" class="J_Cate J_Cyty" data-catelv="2"><span class="u-name">城市</span><i class="u-right"></i></a>
		<a id="J_Lv3" class="J_Cate J_Town" data-catelv="3"><span class="u-name">城区</span><i class="u-right"></i></a>
		<nav class="none">
			<div data-catelv="0">
				<a class="J_CateMore" data-id="11"><i class="u-file"></i><span class="u-name">一</span></a>
				<a class="J_CateMore" data-id="12"><i class="u-file"></i><span class="u-name">二</span></a>
				<a class="J_CateMore" data-id="13"><i class="u-file"></i><span class="u-name">三</span></a>
			</div>
		</nav>
		<script>
			$(function(){
				var $parentCate=null;//$("#J_LV"+catelv)
				
				$(".J_Cate").on('click', function(event){
					//停止冒泡
					event.stopPropagation();
					$("nav").removeClass("none")
					$parentCate = $(this);
					// J_Cate 42*18，下拉框x轴步长21px
					var $this = $(this),
						catelv = $this.data('catelv'),
						xStep = 21,
						xyObj = $this.position();//top 0 left 0 45 90
						
					//设置nav的位置和内容
//					console.log(xyObj.left+xStep);
					$(".J_Cate").find("i").removeClass("u-down");
					$this.find("i").addClass("u-down");
					$("nav>div").data('catelv', catelv);//设置列表内容的级别
					$("nav").css('left', xyObj.left + xStep);//设置列表容器的偏移量
//					console.log($("nav>div").data('catelv'));
				});
				
				$("body").on('click', function(){
					//隐藏nav
					$("nav").addClass("none")
				});
				
				// nav
				$(".J_CateMore").on('click', function(event){
					event.stopPropagation();
					var $this = $(this),
						catelv = $this.parent("div").data('catelv'),
						id = $this.data('id'),
						cateName = $this.find('.u-name').html();
						
//					console.log(id);
//					console.log($parentCate.find('.u-name').html());
					
					$.each($(".J_CateMore"), function(i,item) {
						var $item = $(item),
							_id = $item.data('id');
							
						if(id==_id){
							$parentCate.find('.u-name').html(cateName)
						}
					});
					
					$("nav").addClass("none")
					$(".J_Cate").find("i").removeClass("u-down");
				});
			});
		</script>
	</body>
</html>
